小元件 WatchOS Smart stack (模式)
Smart Stack 是 Apple Watch 上的一種功能,允許使用者在一個顯示區域內滾動檢視多個小元件。小元件可以顯示各種資訊,如天氣、日曆事件、股票等,設計時需要考慮顯示內容的簡潔性和實用性。
基礎資訊框架佈局
/Untitled.png)
A 三行文字佈局,適合簡明扼要地展示重要資訊,使使用者快速獲取內容
新聞小元件使用此佈局來顯示標題和故事摘要。
/Untitled 1.png)
B 內容包含分組或集合的資訊
日曆使用此佈局來傳達事件以及它所屬的日曆的顏色編碼,顏色可以幫助使用者更容易地識別和分類不同的資訊
/Untitled 2.png)
C 內容包含額外的付文字+圖形化內容
條形圖的佈局
有聲書小元件使用條形圖佈局來快速讓人們瞭解他們在書中的位置以及所在的章節或部分,幫助使用者迅速找到聽書的進度和當前位置
圓形圖形的佈局,集圖形化但需要額外支援文字的內容。
活動小工具用圓形圖形佈局,顯示活動環圈的同時,還有卡路里、鍛鍊時間和站立時間的詳細資訊。這種佈局將圖形的直觀展示與文字的細節資訊結合,使使用者更全面地瞭解自己的活動資料
/Untitled 3.png)
E 。內容中數字或使用單詞佔比較大使用大文字佈局。
日曆月小元件,指示應用中的獨特狀態,關鍵詞如“高”或“低”或簡單的數值 ,這種佈局靈活性高,可以根據具體需求展示各種重要資訊。
/Untitled 4.png)
/Untitled 5.png)
F 內容表達隨時間變化的資料使用圖表設計佈局
這種佈局專注於展示資料的時間趨勢,幫助使用者理解資料的動態變化
/Untitled 6.png)
定製化框架佈局
A 根據具體需求設計獨特的佈局,以最佳方式展示內容。文字樣式類可以幫助保持設計的一致性,提升使用者體驗。
我一直想要一個小工具,能跟蹤我喝了多少杯咖啡,然後告訴我咖啡因多久會消失
/Untitled 7.png)
B 三圓形佈局。使用者可以根據個人需求,自定義選擇和配置這三個圓形功能
/Untitled 8.png)
/Untitled 9.png)
/Untitled 10.png)
/Untitled 11.png)
顏色和圖形
A 選擇能夠增強應用識別或傳達資訊意義的背景顏色。
天氣小元件:顯示動態漸變以傳達變化的氣候條件。
股票小元件:根據表現顯示紅色或綠色。
有聲讀物小元件:顯示書籍封面,略顯模糊,以營造環境氛圍。
/Untitled 12.png)
/Untitled 13.png)
B 選擇能夠代表應用功能的精心設計的圖示也有助於使小元件脫穎而出,併為內部內容設定上下文。許多小元件前面加上了圖示,以表明所代表的內容型別。
/Untitled 14.png)
/Untitled 15.png)
會話(Session)
會話是應用程式中有明確開始和結束的活動狀態,如音樂小元件或鍛鍊小元件,建議專注於提供引導進入會話或會話後的有用內容,以補充生成的會話控制小元件
/Untitled 16.png)
/Untitled 17.png)
關鍵場景資訊
五個關鍵時刻,可以幫助確定小元件何時應被優先顯示:時間和日期臨近時、到達特定位置時、檢測到耳機時、使用者醒來或入睡時、以及使用者開始或結束鍛鍊時。
/Untitled 18.png)
A 時間和日期臨近。日曆小元件:利用時間和日期,在事件即將發生(如下一小時內)的情況下增加其相關性,將其提升到 Stack 頂部。
/Untitled 19.png)
B 特定位置。提醒事項小元件:使用位置來填充最相關的內容並優先排序,可以是基於 GPS 的具體位置,也可以是無需請求 GPS 座標的推斷位置(如家、工作地點或學校)。
/Untitled 20.png)
C 耳機檢測。有聲讀物小元件:響應耳機連線,將其優先顯示在 Stack 頂部,使聽書變得更加便捷,只需插上 AirPods 並轉動 Digital Crown。
/Untitled 21.png)
D 使用者活動。活動小元件:利用活躍的鍛鍊狀態來優先排序,當使用者完成跑步時,可以轉動 Crown 檢視這些里程如何幫助關閉 Rings。
/Untitled 22.png)